<template>
  <modal
    width='50'
    v-model='modal'
    title='创建item'
    draggable
    @on-ok="ok"
    @on-cancel="modal=false">
    <Form
      ref='dataForm'
      :model='itme'
      :label-width='70'
      :rules='rules'>
      <FormItem label='名称' prop='name'>
        <label>
          <Input v-model='itme.name' placeholder='请输入名称...'/>
        </label>
      </FormItem>
      <FormItem label='权重' prop='weight'>
        <label>
          <Slider v-model="itme.weight"></Slider>
        </label>
      </FormItem>
    </Form>
  </modal>
</template>

<script>
import { save } from '../../../util/itemService'

export default {
  name: 'online-item-modal',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      modal: false,
      submiting: false,
      loading: true,
      itme: {
        name: '',
        weight: 10
      },
      rules: {
        name: [
          { required: true, message: '名称不能为空！', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    modal (val) {
      !val && this.$emit('input', false)
    },
    data: {
      handler (val) {
        Object.keys(this.itme).forEach(key => {
          this.itme[key] = this.data[key] || ''
        })
      },
      deep: true
    },
    value (val) {
      this.modal = val
      if (val) {
        this.$refs.dataForm.resetFields()
        Object.keys(this.itme).forEach(key => {
          this.itme[key] = this.data[key] || ''
        })
      }
    }
  },
  methods: {
    ok () {
      this.$refs.dataForm.validate((val) => {
        if (val) {
          save(this.itme)
          this.$emit('refreshList')
        }
      })
    }
  }

}
</script>
